<template>
  <div class="item2-list">
    <item2-list ref="item2List" @click="click" />
  </div>
</template>

<script>
import Item2List from "@/components/item/Item2List.vue";
import { List } from "vant";
export default {
  name: "RecommendList",
  components: {
    // Item2,
    Item2List,
    [List.name]: List
  },
  props: {
    materialId: String,
    itemId: Number
  },
  data() {
    return {
      items1: [],
      items2: []
    };
  },
  watch: {
    materialId(newValue, oldValue) {
      console.log(newValue, oldValue, this.materialId)
      if (newValue !== oldValue) {
        this.items1.length = 0;
        this.items2.length = 0;
        this.load();
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.load();
    });
  },
  methods: {
    load() {
      let vm = this;
      vm.$ajax
        .get("/commodity/v1/recommend?materialId=" + vm.materialId + "&pageSize=10")
        .then(r => {
          vm.$refs.item2List.replace(r.data.data)
        });
    },
    click(token) {
      this.$router.push({
        path: "/itemInfo",
        query: { token }
      });
    }
  }
};
</script>

<style scoped>
</style>